<template>
  <div id="main1">
    <!-- <el-link type="primary" @click="handleDownload">{{fileObj.attachName}}</el-link> -->
    <el-button @click="closeTableDiv" plain style="margin: 3px 0 0 30px">关闭</el-button>
  </div>
  <div id="main"></div>
</template>
<script setup name="echarsTable">
import * as echarts from 'echarts';

const emit = defineEmits(['closeTableDiv', '']);
const props = defineProps({
  echartsListData: {
    type: [],
    required: true
  },
  titleName: {
    type: String,
    required: true
  },
  fileObj: {
    type: Object,
    required: true
  }
})
// watch(() => props.echartsListData, () => {
//   if(props.echartsListData.length != 0) {
//     initEchars();
//   }
// }, { immediate: true, deep: true })
const resultChart = ref(null);
function initEchars() {
  // if (resultChart.value !== null) {
	// 	resultChart.value.dispose()
	// }
  console.log('表格')
  console.log(props.echartsListData)
  echarts.init(document.getElementById('main')).dispose()
  resultChart.value = echarts.init(document.getElementById('main'));
  var option;
  option = {
    title: {
      text: ''
    },
    xAxis: {
      type: 'category',
      data: props.echartsListData[1],
      name:props.titleName 
    },
    yAxis: {
      type: 'value',
      name:'发生概率'
    },
    series: [
      {
        data: props.echartsListData[0],
        type: 'line',
        smooth: true
      }
    ]
  };
  option && resultChart.value.setOption(option);
}
function handleDownload() {
  location.href = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadFile?attachId=" + encodeURIComponent(props.fileObj.attachId);
}
function closeTableDiv() {
  // resultChart.value.dispose()
  emit('closeTableDiv', false);
}
onMounted(() => {
  initEchars();
})
</script>
<style scoped>
  #main1 {
    position: absolute;
    right: 50px;
    top: 2px;
    z-index: 10;
  }
  #main {
    width:100%;
    height:400px;
    background-color: #fff;
    box-shadow: 0 0 20px #0003;
    border: 1px solid #707070;
    border-radius: 4px;
  }
</style>